@import '../../style/_variables.less';

.mooli-password-input {
  position: relative;
  margin: @password-input-margin;
  user-select: none;
  &--security { 
    display: flex;
    width: 100%;
    height: @password-input-height;
    cursor: pointer;
    &::after {
      border-radius: @password-input-border-radius;
    }

    >li {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: @password-input-font-size;
      line-height: 1.2;
      background-color: @password-input-background-color;
      >i {
        position: absolute;
        top: 50%;
        left: 50%;
        width: @password-input-dot-size;
        height: @password-input-dot-size;
        background-color: @password-input-dot-color;
        border-radius: 100%;
        transform: translate(-50%, -50%);
        visibility: hidden;
      }
    }
  }
  &--cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @number-keyboard-cursor-width;
    height: @number-keyboard-cursor-height;
    background-color: @number-keyboard-cursor-color;
    transform: translate(-50%, -50%);
    animation: @number-keyboard-cursor-animation-duration mooli-cursor-flicker
      infinite;
  }
  &--info,
  &--error-info {
    margin-top: @padding-md;
    font-size: @password-input-info-font-size;
    text-align: center;
  }

  &--info {
    color: @password-input-info-color;
  }

  &--error-info {
    color: @password-input-error-info-color;
  }
}